/*
用户体验:
文本框获取焦点，文本框颜色发生变化，失去焦点恢复 
*/

$(function () {
    // $(':input')选中所有的input标签，slected标签 texeare标签
    // siblings()查找当前元素在原位置的所有兄弟，不是指当前新匹配集合下的除自己以外的兄弟
    // 互斥事件

    // $(':input').on('focus', function () {
    //     $(this).addClass('focus')
    // }).on('blur', function () {
    //     $(this).removeClass('focus')
    // })
    $('#regForm :input').on('focus blur', function () {
        $(this).toggleClass('focus')
    })
    let $cmt = $('#cmt')

    let maxH = 400,
        minH = 50
    // $('.bigger').on('click', function () {
    //     // 直接累加50 没有动画过渡效果
    //     $cmt.height((index, value) => value < maxH ? value + 50 : value)
    // })

    // $('.smaller').on('click', function () {
    //     $cmt.height((index, value) => value > minH ? value - 50 : value)
    // })

    // 用动画增加过渡效果
    $('.bigger').on('click', function () {
        console.log($cmt.height())
        console.log($cmt.is(':animated'));
        // (!$cmt.is(':animated')) && $cmt.height() < maxH ? $cmt.animate({ height: '+=50px' }, 600) : null
        $cmt.height() < maxH ? $cmt.stop().animate({ height: '+=50px' }, 600) : null
    })
    $('.smaller').on('click', function () {
        $cmt.height() > minH ? $cmt.animate({ height: '-=50px' }, 600) : null
    })





})